<template>
  <div>
    <el-upload
      class="avatar-uploader el-upload--text"
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
    >
      <!-- <video v-if="vidurl" :src="vidurl" class="avatar" controls="controls">
        您的浏览器不支持视频播放
      </video> -->
      <!-- <i
        v-else-if="videoForm.Video == '' && videoFlag == false"
        class="el-icon-plus avatar-uploader-icon"
      ></i> -->
      <img src="../assets/images/视频.png" alt="" />
    </el-upload>
    <!-- <P class="text">请保证视频格式正确，且不超过10M</P> -->
  </div>
</template>
<script>
const Address = require("../utils/url");
export default {
  props: {
    // VideoUrl: ""
  },
  data() {
    return {
      uploadUrl: Address.UPLOAD,
      videoForm: {
        Video: " "
      },

      videoFlag: false,
      //  上传成功返回来的视频地址
      VideoUrl: ""
    };
  },
  computed: {
    vidurl: function() {
      return this.VideoUrl;
    }
  },
  methods: {
    // 上传视频触发的函数
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过10MB哦!");
        return false;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
    },
    handleVideoSuccess(res, file) {
      console.log(res);
      //获取上传图片地址
      this.videoFlag = false;
      if (res.code == 0) {
        this.VideoUrl = res.data.src;
      } else {
        this.$message.error("视频上传失败，请重新上传！");
      }
      this.$emit("getVideo", this.VideoUrl);
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: block;
}
</style>
